<template>
  <!--菜单-->
  <el-menu v-for="x in menuList" :key="x.path">
    <!--根据权限 是否展示一级菜单-->
   <el-sub-menu :index="x.path" v-if="!x.meta.hidden">
     <!--插槽占位 显示一级菜单-->
     <template #title>
       <!--显示图标-->
       <el-icon>
         <component :is="x.meta.icon"></component>
       </el-icon>
       <span>{{x.meta.title}}</span>
     </template>
       <!--显示二级菜单-->
       <template v-for="y in x.children" :key="y.path" >
           <!--根据权限 是否展示二级菜单-->
         <el-menu-item :index="y.path" @click="goRouter" v-if="!y.meta.hidden">
           <!--显示图标-->
           <el-icon>
             <component :is="y.meta.icon"></component>
           </el-icon>
           <!--显示标题-->
           {{y.meta.title}}
         </el-menu-item>
       </template>
   </el-sub-menu>

</el-menu>
</template>

<script setup lang="ts">
//引入路由器
import {useRouter} from 'vue-router'

//接收父组件传过来的菜单数组
defineProps(['menuList'])

//获取路由器对象
let router=useRouter();

//点击菜单触发的方法
let goRouter=(vc:any)=>{
 //通过路由器跳转界面 
 router.push(vc.index)
}


</script>

<style>

</style>